<template>
  <div style="margin-bottom:10px">
    <el-button @click="getWGList('all', user.id)">所有</el-button>
    <el-button @click="getWGList('my', user.id)">我自己的</el-button>
    <el-button @click="getWGList('join', user.id)">我参与的</el-button>
    <el-button @click="getWGList('focus', user.id)">我关注的</el-button>
  </div>
  <el-table :data="appObject.tableData" border style="width: 100%" v-loading="appObject.loading">
    <el-table-column prop="name" label="WG名字" />
    <el-table-column prop="description" label="WG描述" />
    <el-table-column prop="schedule" label="WG日程" />
    <el-table-column prop="learnoutcome" label="WG目录" />
    <el-table-column prop="creatorName" label="WG创建者" />
    <el-table-column label="WG成员">
      <template #default="scope">
        <span style="margin-left: 10px" v-for="(item, index) in scope.row.subtaskList">{{item.assignName}}<br/></span>
      </template>
    </el-table-column>
    <el-table-column label="WG状态">
      <template #default="scope">
        <el-tag v-if="scope.row.status == 0">未完成</el-tag>
        <el-tag v-else type="danger">已完成</el-tag>
      </template>
    </el-table-column>
    <el-table-column v-if="appObject.showEdit" label="操作">
      <template #default="scope">
        <el-button v-if="checkWGStatus(scope.row)" size="small" type="primary" @click="completeWGFun(scope.$index, scope.row)">完成</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination small background layout="prev, pager, next" :total="appObject.total" class="mt-4"
    :page-size="appObject.pagesize" @current-change="handleCurrentChange"/>
</template>

<script setup>
  import { reactive } from 'vue'
  import { getAllWG, getWG, completeWG } from '../http/wgApi.js'
  import { updateScore } from '../http/userApi.js'
  import userStore from '../store/user.js'
  import {storeToRefs} from 'pinia'
  import emitter from '../mitt/index.js'
  
  const uStore = userStore()
  
  const {user} = storeToRefs(uStore)
  
  const appObject = reactive({
    tableData: [],
    loading: true,
    showEdit: false,
    pagesize: 10,
    currentPagenum: 1,
    total: 0,
    btnName: "all"
  })
  
  const getWGList = (e, userId) => {
    appObject.showEdit = (e === "my" || e === "join") ? true : false
    appObject.loading = true
    appObject.btnName = e
    getWG(e, userId, appObject.pagesize, appObject.currentPagenum).then(res => {
      res = res.data
      appObject.tableData = res.data.rows
      appObject.total = res.data.total
      appObject.loading = false
    })
  }
  getWGList("all", uStore.getUserId)
  
  // 监听wg创建事件，刷新页面
  emitter.on("reloadWg", (info) => {
    getWGList(appObject.btnName, uStore.getUserId)
  })
  
  
  const completeWGFun = (index, row) => {
    completeWG({
      assignId: uStore.getUserId,
      wgId: row.id,
      status: 1
    }).then(res => {
      getWGList(appObject.btnName, uStore.getUserId)
    })
  }
  
  const checkWGStatus = (row) => {
    if(row.status == 1) {
      return false
    }
    let flag = false
    row.subtaskList.forEach(e => {
      if(e.status == 0 && e.assignId == uStore.getUserId) {
        flag = true
      }
    })
    return flag
  }
  
  // 分页
  const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    appObject.loading = true
    appObject.currentPagenum = val
    getWGList(appObject.btnName, uStore.getUserId)
  }
</script>

<style scoped>
</style>
